<template>
	<view class="content">
		<view class="ifnoShow">
			<view class="desc-left">
				<view class="title_nav" :class="[status ? 'title_nav_tcolor' : 'title_nav_fcolor']">{{ resultTitle }}</view>
				<view class="detail">
					<view class="detail_grid">
						<view class="detail_grid_item">
							<view>开始时间:</view>
							<view>{{ starttime }} </view>
						</view>
						<view class="detail_grid_item">
							<view>结束时间:</view>
							<view>{{ endtime }}</view>
						</view>
						<!-- <view class="detail_grid_item">
							<view>难度:</view>
							<view>{{ level }}</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="cir-progress">
				<iCircle :percent="percent" :size="240" BgId="BgId" InId="InId" :trailColor="tcolor" :strokeColor="scolor">
					<view class="cir_progress_title">
						<view :class="status ? 'cir_progress_title_tcolor' : 'cir_progress_title_fcolor'">
							<text class="cir_progress_score">{{ percent }}%</text>
						</view>
						<view class="cir_progress_type">正确率</view>
					</view>
					<view slot="canvas">
						<canvas class="CanvasBox strokeCanvas" canvas-id="BgId"></canvas>
						<canvas class="CanvasBox trailCanvas" canvas-id="InId"></canvas>
					</view>
				</iCircle>
			</view>
		</view>
		<!-- <view class="line1"></view> -->
		<view class="detail detail_line_bottom">
			<view class="problem_label_title">
				<text>|</text>
				<text>闯关情况</text>
			</view>
			<view class="problem_label">
				<view class="label">正确</view>
				<view class="label_circle true_circle"></view>
			</view>
			<view class="problem_label">
				<view class="label">错误</view>
				<view class="label_circle false_circle"></view>
			</view>
		</view>
		<view class="problue_result cont_center">
			<view class="prores_type_cont detail_line_bottom">
				<!-- <view class="prores_type_title">单选题</view> -->
				<view class="result_list">
					<subject-if v-for="(itme, index) in datas.interest_answer_lists" :key="index" :iftrue="itme.is_answer == 2" :num="index + 1"></subject-if>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="nav_content">
			<view class="botton_nav">
				<view @click="gobereaking(1)" class="botton_nav_item">
					<i class="iconfont iconback icon-size0"></i>
					<view class="botton_nav_title">趣练记录</view>
				</view>
				<view class="botton_nav_line"></view>
				
				<view @click="gobreak" class="botton_nav_item">
					<i class="iconfont iconquanbujiexi icon-size1"></i>
					<view class="botton_nav_title">全部解析</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import iCircle from '@/components/xiaoran-circle/xiaoran-circle';
import subjectIf from '@/components/subject-if/subject-if';
import cDate from '@/common/util.js';
export default {
	data() {
		return {
			interest_id:"",
			status: true,
			percent: 0,
			resultStatus: '考试，单元测试',
			datas: '',
			endtime: '',
			starttime: '',
			level: 1,
			pid: '' //训练id
		};
	},
	onNavigationBarButtonTap() {
		uni.redirectTo({
			url: '../index/index'
		});
	},
	onLoad: function(e) {
		this.interest_id =e.interest_id;
		this.$zapi.apiPost('user/Interest.User/InterestPresentation',{interest_id:this.interest_id}).then(res=>{
			if(res.data.code==200){
				this.datas = res.data.data;
				this.starttime=cDate.getFormatTime(this.datas.creat_time);
				this.endtime=cDate.getFormatTime(this.datas.update_time);
				this.percent = parseInt(this.datas.correctness_rate * 100);
				if (this.percent< 80) {
					this.status = false;
				} else {
					this.status = true;
				}
			}
		
		});			
	},
	computed: {
		tcolor() {
			if (this.status) {
				return '#B2F2E3';
			} else {
				return '#ffeeee';
			}
		},
		scolor() {
			if (this.status) {
				return '#00D5A2';
			} else {
				return '#f10000';
			}
		},
		resultTitle() {
			if (this.status) {
				return '你成功了!';
			} else {
				return '你失败了!';
			}
		}
	},
	methods: {
		pageChangeRe() {
			uni;
		},
		add() {
			if (this.percent >= 100) {
				return false;
			}
			this.percent += 10;
		},
		minus() {
			if (this.percent <= 0) {
				return false;
			}
			this.percent -= 10;
		},
		gobreak: function() {
			var than = this;
			uni.navigateTo({
				url: 'practice-analysis?interest_id=' + than.interest_id
			});
		},
		gobereaking: function(next) {
			if(next==0){
				uni.redirectTo({
					url:'../courses/breaking-course?sid='+this.datas.sid+'&zid='+this.datas.zid
				});
			}else{
				uni.navigateBack({
					delta:1
				});
			}
		}
	},
	components: {
		iCircle,
		subjectIf
	}
};
</script>

<style lang="stylus" scoped>
.content
	height auto
	.title_nav
		text-align left
		font-size 60upx
		font-weight Bold
		margin 40upx 0 0upx 30upx
	.title_nav_tcolor
		color #00D5A2
	.title_nav_fcolor
		color #f10000
	.cir-progress
		display flex
		float right
		width 226upx
		margin 50upx 40upx
	.detail_line_bottom
		border-bottom none
	.detail
		display flex
		.detail_grid
			width 100%
			.detail_grid_item
				display flex
				justify-content space-between
				align-items center
				color #333333
				font-size 30upx
				font-weight Regular
				margin-left 30upx
			.detail_grid_item:last-child
				border none
		.problem_label
			display flex
			align-items center
			height 70upx
			width 170upx
			justify-content flex-end
			.false_label
				font-size 27upx
				color #333333
			.label_circle
				margin-left 14upx
				width 25upx
				height 25upx
				border-radius 31upx
			.false_circle
				background-color #FF7171
			.true_circle
				background-color #00D5A2


	.problue_result
		width 710upx
		margin-bottom 100upx
		margin-left 30upx
		.prores_type_cont
			height auto
			.prores_type_title
				text-align center
			.result_list
				display flex
				flex-wrap wrap


	.botton_nav
		display flex
		justify-content space-around
		align-items center
		position fixed
		width 100%
		bottom 0
		background-color #ffffff
		box-shadow:0px -1px 0px rgba(0,0,0,0.16);
		height 120upx
		.botton_nav_item
			display flex
			justify-content center
			align-items center
			.botton_nav_icon
				display flex
				justify-content center
				align-items center
				height 60upx
			.icon-size0
				color #00D5A2
			.icon-size1
				color #00D5A2
				
			.icon-size2
				color #FF9900
				transform rotate(180deg)
			.icon-size3
				color #FF9900
				font-size 40upx
			.botton_nav_title
				display flex
				justify-content center
				align-items center
				height 120upx
				font-size 30upx
				color #333333
		.botton_nav_line
			border-right 1px solid #eeeeee
			height 50upx
			align-self center





// 精度条相关样式
.CanvasBox {
	width: 226upx;
	height: 226upx;
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cir_progress_title
	display flex
	flex-direction column
	justify-content center
	.cir_progress_type
		text-align center
		font-size 20upx
		color #999999
	.cir_progress_title_tcolor
		color #00D5A2
	.cir_progress_title_fcolor
		color #f10000
	.cir_progress_score
		font-size 36upx
		font-weight Bold
		margin-left 20upx
</style>
<style>
	.ifnoShow{
		height: 346upx;
		border-bottom: 10upx solid #FAFAFA;
	}
	.desc-left{
		float: left;
	}
	.problem_label_title text:first-child{
		color: #FF9900;
		font-size: 36upx;
		font-weight: bold;
		margin-left: 30upx;
	}
	.problem_label_title text:last-child{	
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		margin-left: 10upx;
	}
	.problem_label_title{
		width: 50%;
		justify-content: flex-start;
	}
	.detail_line_bottom{
		padding-bottom: 60upx;
	}
	.iconfont{
		font-size: 48upx;
		margin-right: 16upx;
	}
</style>
